<template>
	<view class="out-box">
		<view class="header">
			<view class="header_title"><span v-if="lists.result.is_swerve == 1" class="span1">急租 | </span>{{ lists.result.title }}</view>
			<view class="header_money">{{lists.result.rent == null? '面议':  lists.result.rent }}
				<span v-show="lists.result.rent != null" class="span1">元/月</span>
			</view>
			<view v-if="lists.result.feature_label" class="item_right_identifying">
				<view class="item_right_identifying_item" v-for="item1,index1 in lists.result.feature_label.split(',')" :key="index1">
					<view >{{ item1}}</view>
				</view>
			</view>
			<view class="header_information">
				<view class="information_item">
					<view class="item_top">{{lists.result.transfer_fee == null ?'面议':  lists.result.transfer_fee }}</view>
					<view class="item_bottom">转让费</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{  lists.result.shop_area}}m²</view>
					<view class="item_bottom">面积</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{lists.result.is_swerve == 1 ?'是':'否' }}</view>
					<view class="item_bottom">是否急租</view>
				</view>
			</view>
			<view class="header_user">
				<view class="user_item">所属区域： <span class="span2">{{ lists.result.province +'-'+ lists.result.city +'-' + lists.result.county}}</span></view>
				<view class="user_item">联系人： <span class="span2">{{ lists.result.name }}</span></view>
				<view class="user_item">联系电话： <span class="span2">{{ lists.result.phone }}</span></view>
				<view class="user_item">更新于： <span class="span2">{{ lists.result.update_time !=null? lists.result.update_time :lists.result.create_time}}</span></view>
			</view>

			<view class="visits">
				<view class="information_item">
					<view class="item_top">{{lists.result.visits_count}}</view>
					<view class="item_bottom">访问量</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{  lists.result.exposure_count}}</view>
					<view class="item_bottom">曝光量</view>
				</view>
				<view class="information_item">
					<view class="item_top">{{lists.result.get_phone_count}}</view>
					<view class="item_bottom">电话查看</view>
				</view>
			</view>
			<view class="header_warn">联系我时，请一定说明是“铺铺转”看到的</view>
		</view>
		<view class="mian">声明：本信息来自客户提供，如有侵权，请联系平台删除</view>
		<view class="bottom">
			<view class="bottom_main">
				<view class="release" @tap="torent()">发布求租</view>
				<view class="main_right" @tap="towx">
					去小程序查看电话
				</view>
			</view>
		</view>
	</view>
			<!-- 跳转到会员的弹框 -->
	<uni-popup ref="popuptovip" :is-mask-click="false" :safe-area="false">
		<view class="popuptopay">
			<view class="icon"></view>
			<view class="cha" @tap="popuptovipclose"></view>
			<view class="text">开通会员，查看联系方式</view>
			<view class="texttwo">还可获取更多会员权益</view>
			<view class="optinlist">
				<view class="optinlistitem" v-for="(item,index) in memberDescription">
					<image class="icons" :src="item.icon"></image>
					<view class="name">{{ item.name }}</view>
					<!-- <view class="details">{{ item.details }}</view> -->
				</view>
			</view>
			<view class="buttom" @tap="torent">获取会员权限</view>
		</view>
	</uni-popup>
	<view>
		<Verify
				@success="checkSuccess"
				:mode="'pop'"
				:captchaType="'clickWord'"
				:imgSize="{ width: '330px', height: '155px' }"
				ref="verify"
			></Verify>
	</view>
</template>

<script setup>
import {ref,reactive, onMounted, onBeforeMount} from 'vue'
import {onGotApiData,addClick,ongetphone} from '../../util/api.js'
import Verify from "../../components/verify/verify"
	// 从上个页面获取到参数
	const props = defineProps({
			id: String,
		});
		const index_item = props.id
	// const index_item = JSON.parse(decodeURIComponent(props.obj))
	console.log("从上个页面获取到参数11",index_item)
	// 在组件渲染之前执行
	onBeforeMount(() => {
		console.log('组件准备渲染',);
		// user.user_id = uni.getStorageSync('user_id') || '';
	
		// 	// 如果没有user_id跳转到授权页
		// if(!user.user_id){
		// 	uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	});
		// }
		// 调用请求产品信息的接口
		lists_post()
	})
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕',);
	});
	// 跳转会员弹框定义的初始值
	const popuptovip = ref(null)

	const openpopuptovip = () =>{
		popuptovip.value.open('center')
	}
	const popuptovipclose = () =>{
		popuptovip.value.close()
	}
	// 跳转弹框的图标文字描述
const memberDescription = reactive([
	{
		icon:'../../static/images/分组1.png',
		name:'联系方式',
		details:'服务到成功为止',
	},
	{
		icon:'../../static/images/分组2.png',
		name:'精准匹配',
		details:'平台永久收录展示',
	},
	{
		icon:'../../static/images/分组3.png',
		name:'精准推广',
		details:'24小时自动推广',
	},
	{
		icon:'../../static/images/分组4.png',
		name:'专属客服',
		details:'24小时自动推广',
	},

])
	// 个人信息
	let user = reactive({
		user_id:''
	})

	// 求租店铺详细信息
	let lists = reactive({
		result: {}
	});
		// 请求求租店铺详细信息接口
	const lists_post = () =>{
		let params = reactive({
			id : index_item
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_rent/info','GET',params,lists_value)
	}
	// 店铺详细信息请求的结果
	const lists_value = (result) => {
		lists.result = result
		console.log('lists_value请求成功',lists.result)
	}

		// 点击返回首页
	const toindex = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		});
	}

	// 点击收藏按钮
	const oncollect = () =>{
		addClick('h5_求租详情','收藏')
		// 先查询有没有登录账号
		if(!user.user_id){
			uni.showToast({
				title: '请先登录...',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 1000
			}) 
			uni.navigateTo({
				url: '/pages/login/login'
			});
			return
		}
		let params = reactive({
			sid : lists.result.id,
			user_id: user.user_id,
			type:2,
			method_type : !lists.result.is_collect
		})
		console.log("params",params)
		onGotApiData('/api/app/collect/update','POST',params)
		// 提示成功
		// uni.showToast({
		// 		title: '收藏成功',
		// 		//将值设置为 success 或者直接不用写icon这个参数
		// 		icon: 'success',
		// 		//显示持续时间为 2秒
		// 		duration: 1600
		// 	}) 
		// 请求结束改变图标颜色
		lists.result.is_collect = !lists.result.is_collect
	}
	// 点击发布求租
	const torent = () =>{
		addClick('H5求租详情 ','发布求租按钮')
		popuptovipclose()
		uni.redirectTo({
			url: '/pages/release_hire/release_hire'
		});
	}

	//初始化验证码组件
	const verify = ref(false)
	// 点击拨打手机号
	const toipone = () =>{
		//显示验证码
		verify.value.show('center')
		addClick('H5求租详情','电话咨询按钮')
		// console.log('手机号',lists.result.phone )
		// 拨通手机号
		// uni.makePhoneCall({
		// 	phoneNumber: lists.result.phone 
		// });
		
		// 跳转到小程序
		// towx()
	
		// addClick('小程序_求租.详情','电话咨询按钮')
		// 先查询有没有登录账号
		// if(!user.user_id){
		// 	uni.showToast({
		// 		title: '请先登录...',
		// 		//将值设置为 success 或者直接不用写icon这个参数
		// 		icon: 'none',
		// 		//显示持续时间为 2秒
		// 		duration: 1000
		// 	}) 
		// 	uni.navigateTo({
		// 		url: '/pages/login/login'
		// 	});
		// 	return
		// }
	// 	let date = new Date();
	// 	let year = date.getFullYear();  // 获取当前年份
	// 	let month = date.getMonth() + 1;  // 获取当前月份（注意月份从0开始，需要加1）
	// 	let day = date.getDate();  // 获取当前日期
	 
	// 	console.log(year,month,day);
	// 	const newtime = "" +year + month+day
	// 	const oldtime = uni.getStorageSync('PPZ_looktime') || ''
			
	// 	if(newtime == oldtime){
	// 		openpopuptovip()
	// 	}else{
	// 		uni.setStorageSync('PPZ_looktime',"" + year + month + day) 
	// 		// 获取手机号
	// 		ipone_num_post()
	// 	}
	}
	//验证成功触发
	const checkSuccess=(data)=>{
		
		console.log('data',data)
		//验证码验证成功操作
		 verify.value.hide();
			// uni.makePhoneCall({
			// 	phoneNumber: lists.result.phone 
			// });
			// 方法1
			let date = new Date();
			let year = date.getFullYear();  // 获取当前年份
			let month = date.getMonth() + 1;  // 获取当前月份（注意月份从0开始，需要加1）
			let day = date.getDate();  // 获取当前日期
			
			console.log(year,month,day);
			const newtime = "" +year + month+day
			const oldtime = uni.getStorageSync('PPZ_looktime') || ''
					
			if(newtime == oldtime){
				openpopuptovip()
			}else{
				uni.setStorageSync('PPZ_looktime',"" + year + month + day) 
				// 获取手机号
				ipone_num_post(data)
			}
			//ipone_num_post(data)
	}

	// 跳转到小程序
	const towx = () =>{
		addClick('H5求租详情','去小程序查看电话')
		const link = uni.getStorageSync('link');
		let params = reactive({
			link :  link,
			env_version: 'release'
		})
		console.log("params",params)
		onGotApiData('/api/app/xcx/jump_xcx','GET',params,towx_value)
	}
	// 返回的结果
	const towx_value =(result) =>{
		window.location.href = result.openlink
	}
		// 获取手机号相关的变量方法
	let ipone_num = ref(null);
	const ipone_num_post = (data) =>{
		let params = reactive({
			id :  lists.result.id,
			user_id: user.user_id,
			captchaVerification:data.captchaVerification	
		})
		console.log("params",params)
		ongetphone('/h5/api/app/shop_rent/get_phone','GET',params,ipone_num_value)
	}
	// 店铺详细信息请求的结果
	const ipone_num_value = (result) => {
		console.log('111',result);
		if(result.code!=200){
			uni.showToast({
				title: result.message,
				icon: 'error',
				//显示持续时间为 2秒
				duration: 1000
			}) 
			return;
		}
		console.log('111',result.data);
		ipone_num.value = result.data
		// 拨通手机号
		uni.makePhoneCall({
			phoneNumber: ipone_num.value 
		});
	}	

</script>

<style lang="scss" scoped>
	.out-box{
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		font-family: '思源黑体';
		overflow: hidden;
		background-color: rgba(246, 247, 251, 1);
		width: 750rpx auto;
		.header{
			width: 710rpx;
			// height: 930rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			.header_title{
				width: 680rpx;
				margin: 0 auto;
				padding-top: 30rpx;
				color:#333333 ; 
				font-family: PingFang SC-Medium;
				line-height: 56rpx;
				font-size: 36rpx;
				text-indent:20rpx; 
				font-weight: 600;
				.span1{
					color: rgba(0, 92, 241, 1);
				}
			}
			.header_money{
				// width: 690rpx;
				display: inline-block;
				height: 50rpx;
				padding: 6rpx 30rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				font-size: 38rpx;
				background-color: rgba(0, 92, 241, 0.10);
				border-radius: 30rpx;
				font-weight: 600;
				color: rgba(0, 92, 241, 1);
				line-height: 47rpx;			
				.span1{
					// color: rgba(255, 87, 51, 1);
					font-size: 28rpx;
				}
			}
			.item_right_identifying{
				width:700rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				.item_right_identifying_item{
					height: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 30rpx;
					padding: 5rpx 10rpx 5rpx 10rpx;
					color: rgba(0, 92, 241, 1);
					margin:16rpx 0 0rpx 14rpx;
					text-align: center;
					border: 1px solid rgba(0, 92, 241, 1);
					border-radius: 20rpx;
				}
			}
			.header_information{
				width: 680rpx;
				height: 120rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				border-radius: 12rpx;
				background-color: rgba(166, 166, 166, 0.10);
				display: flex;

				justify-content:space-between;
				.information_item{
					width: 166rpx;
					height: 94rpx;
					font-size: 26rpx;
					padding-top: 20rpx;
					text-align: center;
					.item_top{
						width: 166rpx;
						height: 44rpx;
						line-height: 38rpx;
						font-weight: 700;
						font-size:24rpx;
						color:rgba(0, 92, 241, 1);
						overflow: hidden;
					}
					.item_bottom{
						width: 166rpx;
						height: 36rpx;
						font-size: 22rpx;
						margin-top: 8rpx;
						font-weight: 400;
						color: rgba(137, 137, 137, 1) ;
						line-height: 30rpx;
						// background-color: rgb(149, 127, 101);
					}
				}
			}
			.header_user{
				width: 660rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				margin: 0 auto;
				margin-top: 20rpx;
				.user_item{
					width: 660rpx;
					height: 50rpx;
					font-size: 22rpx;
					font-weight: 600;
					color: rgba(137, 137, 137, 1);
					line-height: 50rpx;
					.span2{
						color: #000;
						font-weight: 500;
						font-size: 28rpx;
					}
				}
			}
			.visits{
				width: 680rpx;
				height: 140rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				border-top: 1px solid rgba(240, 240, 240, 1);
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				background-color: #FFFFFF;
				display: flex;
				justify-content:space-between;

				.information_item{
					width: 220rpx;
					height: 140rpx;
					// background-color: pink;
					font-size: 26rpx;
					padding-top: 22rpx;
					color: #666666;
					text-align: center;
	
					.item_top{
						width: 220rpx;
						height: 50rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(0, 0, 0, 1);
						line-height: 50rpx;
					}
					.item_bottom{
						width: 220rpx;
						height: 44rpx;
						line-height: 20rpx;
						color: rgba(137, 137, 137, 1);
						margin-top: 16rpx;
						font-size: 26rpx;
					}
				}
			}
			.header_warn{
				width: 660rpx;
				height: 30rpx;
				font-size: 22rpx;
				margin: 0 auto;
				color: #005CF1;
				line-height: 26rpx;
				text-align: center;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
			}


		}
		.mian{
			width: 740rpx;
			height: 100rpx;
			margin: 0 auto;
			margin-bottom: 120rpx;
			font-size: 24rpx;
			line-height: 100rpx;
			text-align: center;
			color: rgba(188, 188, 188, 1);
			font-size: 20rpx;
		}
		.bottom{
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			z-index: 100;
			.bottom_main{
				width: 740rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				.release{
					width: 340rpx;
					height: 90rpx;
					margin: 15rpx 0 0 0rpx;
					background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
					border-radius: 20rpx;
					text-align:center;
					color: #fff;
					line-height: 90rpx;
				}
				.main_right{
					width: 340rpx;
					height: 90rpx;
					text-align: center;
					margin: 15rpx 0 0 0rpx;
					background-color: #fff;
					border: 1px solid rgba(0, 92, 241, 1);
					color: rgba(0, 92, 241, 1);
					border-radius: 20rpx;
					line-height: 90rpx;

				}
			}
		}
	}
	.popuptopay{
		width: 660rpx;
		height: 560rpx;
		border-radius: 10px;
		// margin: 0 auto;
		background: linear-gradient(0deg, rgba(252, 246, 240, 1) 0%, rgba(252, 230, 207, 1) 89.58%, rgba(250, 211, 172, 1) 100%);

		// background: linear-gradient(180deg, rgba(252, 246, 240, 1) 0%, rgba(252, 230, 207, 1) 50%, rgba(250, 211, 172, 1) 100%);
		box-shadow: 0px 2px 4px  rgba(217, 214, 254, 1);
		position: relative;
		// left: 26px;
		.icon{
			width: 300rpx;
			height: 240rpx;
			background: url(../../static/images/hunagguan.png);
			background-size: 100% 100%;
			position: absolute;
			top: -180rpx;
			left: 180rpx;
		}
		.cha{
			width: 68rpx;
			height: 68rpx;
			border-radius: 40rpx;
			background: url(../../static/images/chacha.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 295rpx;
			top: 570rpx;
		}
		.text{
			width: 580rpx;
			height:100rpx;
			font-size: 44rpx;
			line-height: 70rpx;
			font-family: '阿里妈妈数黑体';
			font-weight: 900;
			color: rgba(135, 73, 83, 1);
			text-align: center;
			position: absolute;
			top: 70rpx;
			left: 50rpx;
		}
		.texttwo{
			width: 580rpx;
			height:60rpx;
			font-size: 26rpx;
			line-height: 60rpx;
			font-family: '阿里妈妈数黑体';
			font-weight: 500;
			color: rgba(82, 82, 82, 1);
			text-align: center;
			position: absolute;
			top: 140rpx;
			left: 50rpx;
		}
		.optinlist{
			width: 680rpx;
			height: 300rpx;
			display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			border-radius: 10rpx;
			position: absolute;
			top: 240rpx;
			left: 10rpx;
			.optinlistitem{
				width: 160rpx;
				height: 140rpx;
				// background-color: pink;
				// border: 1px solid black;
				position: relative;
				.icons{
					width: 75rpx;
					height: 75rpx;
					position: absolute;
					top: 10rpx;
					left: 50rpx;
				}
				.name{
					width: 160rpx;
					height: 30rpx;
					font-size: 26rpx;
					text-align: center;
					position: absolute;
					top: 100rpx;
					font-weight: 400;
					line-height: 30rpx;
					color: rgba(212, 48, 48, 1);

				}
				.details{
					width: 190rpx;
					height: 30rpx;
					font-size: 22rpx;
					text-align: center;
					position: absolute;
					top: 136rpx;
					// left: 50rpx;
					color: rgba(181, 143, 143, 1);
				}
			}
		}
		.buttom{
			width: 540rpx;
			height: 70rpx;
			background-color: rgba(255, 87, 51, 1);
			position: absolute;
			top: 460rpx;
			left: 60rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			line-height: 70rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
</style>
